

import "./index.scss"
import { useEffect } from "react"
import { $http } from "../../api"
import { mbdata } from "../../mobx/data"
import { Layout, Breadcrumb } from 'antd';
import Menu from "./menu";
import Head from "./head";
import { Switch, Route, Redirect } from "react-router-dom";
import react, { Suspense, lazy } from "react";


const { Header, Footer, Sider, Content } = Layout;

export default function MainBox() {
    useEffect(() => {
        const { userInfo } = mbdata
        // 优化 避免每次重复请求
        if (!userInfo) {
            $http.getuserinfo()
                .then(res => {
                    if (res.code == 200) {
                        mbdata.changeUserInfo(res.result)
                    }
                })
        }

    }, [])
    return (
        <div style={{ width: "100%", height: '100%' }}>
            <Layout style={{ width: "100%", minHeight: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
                <div className="menu">
                    <Menu />
                </div>
                <Layout style={{ flex: 1, height: '100%' }}>
                    <div className="head" style={{ width: "100%" }}>
                        <Head />
                    </div>
                    <Layout style={{ padding: '0 20px' }}>

                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>

                        <Content style={{ padding: 20, height: 'auto', background: '#e4e4e4', overflow: "auto" }}>
                            <Suspense fallback={<div></div>}>
                                <Switch>
                                    <Route path="/main" exact render={() => (<Redirect to="/main/home" />)} />
                                    <Route path="/main/home" component={lazy(() => import('../home/home'))} />

                                    <Route path="/main/user" render={() => (
                                        <Switch>
                                            <Route path="/main/user/list" component={lazy(() => import('../user/list'))} />
                                            <Route path="/main/user/add" component={lazy(() => import('../user/add'))} />
                                            <Route path="/main/user/fenxi" component={lazy(() => import('../user/fenxi'))} />
                                        </Switch>
                                    )} />


                                    <Route path="/main/grade" render={() => (
                                        <Switch>
                                            <Route path="/main/grade/list" component={lazy(() => import('../grade/list'))} />
                                            <Route path="/main/grade/add" component={lazy(() => import('../grade/add'))} />
                                            <Route path="/main/grade/fenxi" component={lazy(() => import('../grade/fenxi'))} />
                                            <Route path="/main/grade/my" component={lazy(() => import('../grade/my'))} />
                                        </Switch>
                                    )} />

                                    <Route path="/main/anno" render={() => (
                                        <Switch>
                                            <Route path="/main/anno/list" component={lazy(() => import('../anno/list'))} />
                                            <Route path="/main/anno/add" component={lazy(() => import('../anno/add'))} />
                                            <Route path="/main/anno/detail/:id" component={lazy(() => import('../anno/detail'))} />
                                            <Route path="/main/anno/update" component={lazy(() => import('../anno/update'))} />
                                        </Switch>
                                    )}></Route>




                                    <Route path="/main/jiaowu" render={() => (
                                        <Switch>
                                            <Route path="/main/jiaowu/xueke" component={lazy(() => import('../jiaowu/xueke'))} />
                                            <Route path="/main/jiaowu/banji" component={lazy(() => import('../jiaowu/banji'))} />
                                            <Route path="/main/jiaowu/action" component={lazy(() => import('../jiaowu/action'))} />
                                        </Switch>
                                    )}></Route>

                                    <Route path="/main/info" component={lazy(() => import('../mine/mine'))} />

                                    <Route component={() => (<Redirect to="/404" />)} />
                                </Switch>
                            </Suspense>
                        </Content>
                    </Layout>
                    <Footer style={{ textAlign: 'center', padding: 20 }}>
                        千锋在线教务管理系统 &copy; 大左老师 .LTI
                    </Footer>
                </Layout>
            </Layout>
        </div>
    )
}